<div class="row-fluid headline-row">
    <div class="span12 headline-line">
        <div class="headline pull-left">
            <h1><?php echo $headline ?></h1>
        </div>

        <div class="pull-right go-to-top">
            <i class="w-glyphicon-up-arrow"></i> To Top
        </div>

        <?php if (isset($category) && !$is_mobile): ?>
            <div class="add-shop pull-right">
                <a href="<?php echo base_url() ?>shop/add?category=<?php echo $category ?>">
                    <i class="w-glyphicon-circle-plus"></i> Add your Shop
                </a>
            </div>
        <?php endif; ?>
    </div>
    <div class="clearfix"></div>
</div>

<div class="masonry-container" style="width:100%">
    <?php
    foreach ($shop_list as $shop) {
        $this->load->view('shop_level/level' . $shop['shop_level'], $shop);
    }
    ?>

</div>



<div id="shopModal" class="modal hide fade" style="top:2%;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="shopModalLabel"><?php echo isset($shop_fix) ? $shop_fix['shop_title'] : '' ?></h3>
    </div>
    <div class="modal-body" style="max-height:none">

        <div class="well-small pull-left" style="width:420px;height:470px;overflow-y:auto;margin-bottom: 0;">
            <p>
                <?php
                if (isset($shop_fix)) {
                    $this->load->helper('bbcode');
                    echo nl2br(parse_bbcode($shop_fix['shop_description']));
                }
                ?>
            </p>
        </div>

        <div class="pull-right">
            <div class="well">
                <a href="javascript:void(0)" class="do_vote btn btn-primary btn-block" data-loading-text='โหวตแล้ว' data-shop-hash="<?php echo isset($shop_fix) ? hashids_encrypt($shop_fix['id']) : '' ?>"><i class="icon icon-thumbs-up"></i> โหวตชอบร้านนี้</a>
            </div>
            <div name="fb-like-box" class="fb-like-box" data-href="<?php echo isset($shop_fix) ? $shop_fix['shop_facebook'] : '' ?>" data-width="320" data-height="400" data-show-faces="false" data-stream="true" data-header="false"></div>
        </div>

    </div>
    <div class="modal-footer" style="padding:0px 15px">
        <hr style="margin-top:0px;margin-bottom: 10px;"/>
        <div class="pull-left">

            <span class="shortcut shop_link"><?php echo isset($shop_fix['shop_link']) && $shop_fix['shop_link'] != '' ? '<a href="' . $shop_fix['shop_link'] . '"><img src="' . base_url() . 'img/icons/link.png"/></a>' : '' ?></span>
            <span class="shortcut shop_facebook"><?php echo isset($shop_fix['shop_facebook']) && $shop_fix['shop_facebook'] != '' ? '<a href="' . $shop_fix['shop_facebook'] . '"><img src="' . base_url() . 'img/icons/facebook.png"/></a>' : '' ?></span>
            <span class="shortcut shop_instagram"><?php echo isset($shop_fix['shop_instagram']) && $shop_fix['shop_instagram'] != '' ? '<a href="' . $shop_fix['shop_instagram'] . '"><img src="' . base_url() . 'img/icons/instagram.png"/></a>' : '' ?></span>
        </div>
        <?php if (!$is_mobile): ?>
            <a href="<?php echo base_url() ?>shop/<?php echo isset($shop_fix) ? hashids_encrypt($shop_fix['id']) . '/edit' : '' ?>" class="btn btn-primary edit_button"><i class="icon-edit"></i> แก้ไขร้านนี้</a>
        <?php endif ?>
        <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> ปิดหน้าต่าง</button>
    </div>
</div>


<script>
<?php if (!$is_mobile): ?>
        $(function() {
            $('.box .show_shop_modal').click(function(e) {
                e.preventDefault();
                $('.do_vote').button('reset');

                $('#shopModal #shopModalLabel').html($(this).attr('title'));

                /*Manipulate data-shop*/
                var data_shop = $(this).attr('data-shop').split(';');
                /*Do vote Hash*/
                $('.do_vote').attr('data-shop-hash', data_shop[0]);
                /*Edit button*/
                $('.edit_button').attr('href', '<?php echo base_url() ?>shop/' + data_shop[0] + '/edit');

                /*Check Link*/
                if (data_shop[1] != '')
                {
                    $('#shopModal .shop_link').html('<a rel="nofollow" href="' + data_shop[1] + '" target="_blank"><img src="<?php echo base_url() ?>img/icons/link.png"/></a>');
                }
                /*Check Facebook*/
                if (data_shop[2] != '')
                {
                    $('#shopModal .shop_facebook').html('<a rel="nofollow" href="' + data_shop[2] + '" target="_blank"><img src="<?php echo base_url() ?>img/icons/facebook.png"/></a>');
                    $('.fb-like-box').attr('data-href', data_shop[2]);
                    FB.XFBML.parse();
                }
                else
                {
                    $('.fb-like-box').hide();
                }
                /*Check Instagram*/
                if (data_shop[3] != '')
                {
                    $('#shopModal .shop_instagram').html('<a rel="nofollow" href="' + data_shop[3] + '" target="_blank"><img src="<?php echo base_url() ?>img/icons/instagram.png"/></a>');
                }

                /*Get Shop Description*/
                $.post('<?php echo base_url() ?>ajax/get_shop_description', {'shop_hash': data_shop[0]}, function(msg) {
                    $('#shopModal p').html(msg);
                    $('#shopModal').modal({
                        'show': true,
    <?php echo $is_mobile ? '"backdrop":false' : '' ?>
                    });
                });

            });
        });

    <?php
    if (isset($shop_fix)) {
        ?>

            $('#shopModal').modal({
                'show': true,
            });
        <?php
    }
    ?>


        $('.do_vote').click(function() {
            $(this).button('loading');

            var shop_hash = $(this).attr('data-shop-hash');
            $.post('<?php echo base_url() ?>ajax/do_vote', {'shop_hash': shop_hash});
        });
<?php endif; ?>

        $(function() {
            $('.go-to-top').hide();
            $('.masonry-container').masonry({
                itemSelector: '.box',
                isFitWidth: true,
                columnWidth: 0,
                gutterWidth: 5,
            });
        });



<?php
if ($this->uri->segment(1) != '' && !$is_mobile):
    ?>
        var current_headline_row = $('.headline-row').offset().top;
        $(document).scroll(function() {
            if ($('body').scrollTop() > current_headline_row)
            {
                $('.go-to-top').show();
                $('.headline-row').css('position', 'absolute');
                $('.headline-row').css('top', $('body').scrollTop() + $(window).height() - $('.headline-row').height());
            }
            else
            {
                $('.go-to-top').hide();
                $('.headline-row').css('position', 'static');
            }
        });
        $('.go-to-top').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
        });
    <?php
endif;
?>


</script>

